<template>
  <template v-if="data?.items">
    <div class="table-collapse" :class="[gapTop ? 'gap-top' : '']">
      <div class="table-collapse-inner">
        <div class="table-collapse-header">
          <div
            class="col__header"
            v-for="(item, index) in data.headers"
            :key="index"
            :style="{ width: item?.width, flex: item.flex }"
          >
            {{ $t(item.title) }}
          </div>
          <div class="col__end" :style="{ width: colEndWidth }">
            {{ $t("btnText.consult") }}
          </div>
        </div>
        <div class="table-collapse-items" v-if="data.items.length > 0">
          <div
            class="items__rows__outer"
            v-for="(item, index) in data.items"
            :key="index"
          >
            <div class="items__rows">
              <div
                class="col__items"
                :style="{
                  width: data.headers[0]?.width,
                  flex: data.headers[0].flex ? data.headers[0].flex : '',
                }"
                v-if="item.col_1"
              >
                <div>
                  <div class="collapse__control" v-if="item.details">
                    <IconAdd
                      @click="item.fold = true"
                      v-if="!item.fold"
                      class="pointer"
                    />
                    <IconMinus
                      class="pointer"
                      v-else
                      @click="item.fold = false"
                    />
                  </div>
                  <span> {{ item.col_1.value }}</span>
                </div>
              </div>
              <div
                class="col__items"
                :style="{
                  width: data.headers[1]?.width,
                  flex: data.headers[1].flex ? data.headers[1].flex : '',
                }"
                v-if="item.col_2"
              >
                <template v-if="judgeIsArray(item.col_2.value)">
                  <div class="tags" v-if="item.col_2.type == 'tags'">
                    <div
                      class="tag-item"
                      v-for="tagItem in item.col_2.value"
                      :key="tagItem"
                    >
                      {{ tagItem }}
                    </div>
                  </div>
                  <div
                    class="grid__container"
                    v-else-if="item.col_2.layout == 'grid'"
                    :style="{
                      display: item.col_2.layout,
                      gridTemplateColumns: `repeat(${item.col_2.colCount},1fr)`,
                    }"
                  >
                    <div
                      class="grid__item"
                      v-for="(gridItem, index) in item.col_2.value"
                      :key="index"
                    >
                      <IconAddress
                        v-if="item.col_2.type == 'address'"
                      ></IconAddress>
                      <IconAirport
                        v-if="item.col_2.type == 'airport'"
                      ></IconAirport>
                      <span>{{ gridItem }}</span>
                    </div>
                  </div>
                </template>
                <div v-else>
                  {{ item.col_2.value }}
                </div>
              </div>
              <div
                class="col__items"
                :style="{
                  width: data.headers[2]?.width,
                  flex: data.headers[2].flex ? data.headers[2].flex : '',
                }"
                v-if="item.col_3"
              >
                <template v-if="judgeIsArray(item.col_3.value)">
                  <div class="tags" v-if="item.col_3.type == 'tags'">
                    <div
                      class="tag-item"
                      v-for="tagItem in item.col_3.value"
                      :key="tagItem"
                    >
                      {{ tagItem }}
                    </div>
                  </div>
                  <div
                    class="grid__container"
                    v-else-if="item.col_3.layout == 'grid'"
                    :style="{
                      display: item.col_3.layout,
                      gridTemplateColumns: `repeat(${item.col_3.colCount},1fr)`,
                    }"
                  >
                    <div
                      class="grid__item"
                      v-for="(gridItem, index) in item.col_3.value"
                      :key="index"
                    >
                      <IconAddress
                        v-if="item.col_3.type == 'address'"
                      ></IconAddress>
                      <IconAirport
                        v-if="item.col_3.type == 'airport'"
                      ></IconAirport>
                      <span>{{ gridItem }}</span>
                    </div>
                  </div>
                </template>
                <div v-else>
                  {{ item.col_3.value }}
                </div>
              </div>
              <div
                class="col__items"
                :style="{
                  width: data.headers[3]?.width,
                  flex: data.headers[3].flex ? data.headers[3].flex : '',
                }"
                v-if="item.col_4"
              >
                <template v-if="judgeIsArray(item.col_4.value)">
                  <div class="tags" v-if="item.col_4.type == 'tags'">
                    <div
                      class="tag-item"
                      v-for="tagItem in item.col_4.value"
                      :key="tagItem"
                    >
                      {{ tagItem }}
                    </div>
                  </div>
                  <div
                    class="grid__container"
                    v-else-if="item.col_4.layout == 'grid'"
                    :style="{
                      display: item.col_4.layout,
                      gridTemplateColumns: `repeat(${item.col_4.colCount},1fr)`,
                    }"
                  >
                    <div
                      class="grid__item"
                      v-for="(gridItem, index) in item.col_4.value"
                      :key="index"
                    >
                      <IconAddress
                        v-if="item.col_4.type == 'address'"
                      ></IconAddress>
                      <IconAirport
                        v-if="item.col_4.type == 'airport'"
                      ></IconAirport>
                      <span>{{ gridItem }}</span>
                    </div>
                  </div>
                </template>
                <div v-else>
                  {{ item.col_4.value }}
                </div>
              </div>
              <div
                v-if="item.col_5"
                class="col__items"
                :style="{
                  width: data.headers[4]?.width,
                }"
              >
                <div>
                  {{ item.col_5.value }}
                </div>
              </div>
              <div
                v-if="item.col_6"
                class="col__items"
                :style="{
                  width: data.headers[5]?.width,
                }"
              >
                <div>
                  {{ item.col_6.value }}
                </div>
              </div>
              <div
                v-if="item.col_7"
                class="col__items"
                :style="{
                  width: data.headers[6]?.width,
                }"
              >
                <div>
                  {{ item.col_7.value }}
                </div>
              </div>
              <div class="col__end" :style="{ width: colEndWidth }">
                <IconConsult
                  @click="consult(item)"
                  class="pointer"
                ></IconConsult>
              </div>
            </div>
            <Transition name="heightAuto">
              <div
                class="items__details__outer"
                :class="item.fold ? 'active' : ''"
              >
                <div style="min-height: 0px">
                  <div class="items__details" v-html="item.details"></div>
                </div>
              </div>
            </Transition>
          </div>
        </div>
        <div class="table-no-data" v-else>{{ $t("tag.no_data") }}</div>
      </div>
    </div>
    <div class="table-collapse-mobile" :class="[gapTop ? 'gap-top' : '']">
      <div
        class="table-collapse-mobile-item"
        v-for="(item, index) in data.items"
        :key="index"
      >
        <div class="table-collapse-mobile-item-header-container">
          <div
            class="table-collapse-mobile-item-header"
            :class="[type == 'rent' ? 'rent-table' : '']"
          >
            <div class="row" v-if="item.col_1">
              <div class="left">
                <template v-if="item.details">
                  <IconAdd
                    class="svg-left"
                    fill="#3D88F2"
                    @click="item.fold = !item.fold"
                    v-if="!item.fold"
                  />
                  <IconMinus
                    class="svg-left"
                    fill="#3D88F2"
                    @click="item.fold = !item.fold"
                    v-else
                  />
                </template>
                <div>
                  <span class="label">{{ $t(data.headers[0].title) }}：</span>
                  <span>{{ item.col_1?.value }}</span>
                </div>
              </div>
              <div class="right" v-if="item.address">
                <IconAddress fill="#70818C" class="svg-address" />
                <span>{{ item.address }}</span>
              </div>
            </div>
            <div :class="type == 'lm' ? 'lm-table' : ''" v-if="item.col_2">
              <span>{{ $t(data.headers[1].title) }}：</span>
              <span v-if="type !== 'lm'">{{ item.col_2?.value }}</span>
              <div
                v-else
                class="grid__container"
                :style="{
                  display: item.col_2.layout,
                  gridTemplateColumns: `repeat(${item.col_2.colCount},1fr)`,
                }"
              >
                <div
                  class="grid__item"
                  v-for="(gridItem, index) in item.col_2.value"
                  :key="index"
                >
                  <IconAddress
                    v-if="item.col_2.type == 'address'"
                  ></IconAddress>
                  <IconAirport
                    v-if="item.col_2.type == 'airport'"
                  ></IconAirport>
                  <span>{{ gridItem }}</span>
                </div>
              </div>
            </div>
            <div v-if="type == 'lm' && item.col_3" class="lm-table">
              <span>{{ $t(data.headers[2].title) }}：</span>
              <span v-if="type !== 'lm'">{{ item.col_3?.value }}</span>
              <div
                v-else
                class="grid__container"
                :style="{
                  display: item.col_3.layout,
                  gridTemplateColumns: `repeat(${item.col_3.colCount},1fr)`,
                }"
              >
                <div
                  class="grid__item"
                  v-for="(gridItem, index) in item.col_3.value"
                  :key="index"
                >
                  <IconAddress
                    v-if="item.col_3.type == 'address'"
                  ></IconAddress>
                  <IconAirport
                    v-if="item.col_3.type == 'airport'"
                  ></IconAirport>
                  <span>{{ gridItem }}</span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="table-collapse-mobile-item-content-rent"
            v-if="type == 'rent'"
          >
            <div class="rent-row" v-if="item.col_3">
              <div>
                <span class="label">{{ $t(data.headers[2].title) }}：</span>
                <span>{{ item.col_3?.value }}</span>
              </div>
            </div>
            <div class="rent-gird">
              <div>
                <span>{{ $t(data.headers[3].title) }}：</span>
                <span>{{ item.col_4.value }}</span>
              </div>
              <div>
                <span>{{ $t(data.headers[4].title) }}：</span>
                <span>{{ item.col_5.value }}</span>
              </div>
              <div>
                <span>{{ $t(data.headers[5].title) }}：</span>
                <span>{{ item.col_6.value }}</span>
              </div>
              <div>
                <span>{{ $t(data.headers[6].title) }}：</span>
                <span>{{ item.col_7.value }}</span>
              </div>
            </div>
          </div>
          <div
            class="table-collapse-mobile-item-main"
            :class="item.fold ? 'active' : ''"
            v-if="item.details"
          >
            <div>
              <div class="divider-line"></div>
              <div
                class="table-collapse-mobile-item-main-detail"
                v-html="item.details"
                v-if="item.details"
              ></div>
            </div>
          </div>
          <div class="table-collapse-mobile-item-footer">
            <div class="inner" @click="consult(item)">
              <IconConsult />
              <span>{{ $t("btnText.imed_consult") }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <template v-else>
    <div class="pc-skeleton" :class="[gapTop ? 'gap-top' : '']">
      <div>
        <div v-for="i in 8" :key="i">
          <Skeleton gap-skeleton height="40px" block></Skeleton>
        </div>
      </div>
    </div>
    <div class="mobile-skeleton" :class="[gapTop ? 'gap-top' : '']">
      <div class="table-collapse-mobile">
        <div class="table-collapse-mobile-item" v-for="i in 4" :key="i">
          <div class="table-collapse-mobile-item-header-container">
            <div class="table-collapse-mobile-item-header">
              <Skeleton mobile :rows="2"></Skeleton>
            </div>
          </div>
          <div class="table-collapse-mobile-item-footer">
            <Skeleton mobile width="40%"></Skeleton>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { getCurrentInstance } from "vue";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

type HeaderItem = {
  title: string;
  width?: string;
  flex?: string;
};
type ColItem = {
  value: string | Array<any>;
  type: "tags" | "airport" | "address" | "";
  layout: "grid";
  colCount: number;
};
type TableItem = {
  id: number | string;
  col_1?: ColItem;
  col_2?: ColItem;
  col_3?: ColItem;
  col_4?: ColItem;
  col_5?: ColItem;
  col_6?: ColItem;
  col_7?: ColItem;
  address?: string;
  details?: string;
  fold?: boolean;
};
type TableData = {
  headers?: HeaderItem[];
  items?: TableItem[];
};

type Props = {
  data?: TableData;
  colEndWidth?: string;
  type?: "lm" | "rent";
  gapTop?: boolean;
};
withDefaults(defineProps<Props>(), {});

const emits = defineEmits(["clickEndCol"]);

const consult = (item: TableItem) => {
  emits("clickEndCol", item);
};

const judgeIsArray = computed(() => {
  return (data) => {
    if (Array.isArray(data) && data.constructor === Array) {
      return true;
    }
    return false;
  };
});
</script>
<style scoped lang="less">
.gap-top {
  padding-top: 16px;
}
.table-no-data {
  min-height: 500px;
}

.grid__container {
  .grid__item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
.table-collapse {
  font-size: 16px;
  .table-collapse-inner {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border: 1px solid lightgray;
    .consult {
      svg {
        width: 22px;
        height: 22px;
        cursor: pointer;
      }
    }
    .col__end {
      width: 240px;
    }
    .table-collapse-header,
    .items__rows {
      display: flex;
      & > div {
        padding: 9px 16px;
      }
      .consult {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .table-collapse-header {
      color: #fff;
      background-color: var(--yd-primary-color);
      .course_title {
        text-align: left;
      }
      & > div {
        border-right: 1px solid #fff;
        &:last-child {
          display: flex;
          align-items: center;
          justify-content: center;
          border-right-color: transparent;
          border-right-width: 0;
        }
      }
    }
    .table-collapse-items {
      .items__rows__outer {
        color: #323232;
        background: rgba(61, 136, 242, 0.3);

        .col__items {
          display: flex;
          align-items: center;
          border-right: 1px solid #fff;
          white-space: normal;
          &:last-child {
            border-right-color: transparent;
          }
          &:first-child {
            & > div {
              display: flex;
              align-items: center;
              gap: 8px;
              white-space: normal;
            }
          }
          & > div {
            word-break: break-all;
            flex: 1;
          }
          .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            .tag-item {
              padding: 5px 8px;
              font-size: 16px;
              color: #323232;
              background: #d1e1f8;
              border-radius: 4px;
            }
          }
        }
        &:nth-child(2n) {
          background: rgba(61, 136, 242, 0.1);
          & > div {
            border-right-color: transparent;
            .items__rows {
              & > div {
                border-right: 1px solid transparent;
              }
            }
          }
        }
        .items__details__outer {
          display: grid;
          grid-template-rows: 0fr;
          overflow: hidden;
          transition: all 0.3s;
          &.active {
            grid-template-rows: 1fr;
            .items__details {
            }
          }
        }
        .items__details {
          min-height: 0;
          border-top: 1px solid #fff;
          padding: 24px 16px;
          white-space: normal;
          & * {
            font-size: 16px !important;
            color: #323232;
          }
        }
      }
      .col__end {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .table-no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bed6f8;
    color: #626262;
  }
}

// mobile
.table-collapse-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .gap-top {
    padding-top: 61px !important;
  }
  .table-collapse {
    display: none;
  }
  // mobile
  .table-collapse-mobile {
    display: flex;
    flex-direction: column;
    gap: 61px;
    font-size: 72px;
    .table-collapse-mobile-item {
      border: 1px solid #cfd2cc;
      border-radius: 51px;
      overflow: hidden;
      .table-collapse-mobile-item-header-container {
        // padding: 61px;
      }
      .divider-line {
        margin: 61px 0;
      }
      .table-collapse-mobile-item-header {
        padding: 61px;
        &.rent-table {
          display: flex;
          gap: 102px;
          .row {
            padding-bottom: 0;
            .left {
              .label {
                display: none;
              }
            }
          }
        }
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 61px;
          & > * {
            display: flex;
            align-items: center;
            gap: 41px;
          }
          .right {
            font-size: 61px;
          }
          .svg-left {
            width: 82px;
            height: 82px;
          }
        }
        .lm-table {
          padding-top: 61px;
          border-top: 1px solid #ccd6de;
          span {
            display: block;
          }
          & > div {
            display: grid;
            grid-template-columns: 1fr 1fr;
          }
          .grid__container {
            column-gap: 61px;
          }
          .grid__item {
            padding: 51px 0;
            gap: 41px;
          }
        }
      }
      .table-collapse-mobile-item-content-rent {
        .rent-row {
          padding: 0 61px;
          padding-top: 0;
          div {
            padding-bottom: 61px;
            border-bottom: 1px solid #ccd6de;
          }
        }
        .rent-gird {
          display: grid;
          grid-template-columns: 1fr 1fr;

          & > div {
            padding: 61px;
            padding-right: 0;
          }
        }
      }
      .table-collapse-mobile-item-main {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: all 0.3s;
        .divider-line {
          margin-top: 0;
        }
        &.active {
          grid-template-rows: 1fr;
        }
        & > div {
          min-height: 0;
        }
        .table-collapse-mobile-item-main-detail {
          padding: 0 61px;
          padding-bottom: 61px;
        }
      }
      .table-collapse-mobile-item-footer {
        padding: 61px;
        border-top: 1px solid #d3dce3;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--yd-primary-color);
        .inner {
          display: flex;
          align-items: center;
          gap: 41px;
        }
      }
    }
  }
}
</style>
